import React, { FC, useState } from "react";
import { getState } from "@/store";

const LineRender: FC<{line: string}> = (props) => {
  const { loginUser } = getState()
  const mention = `@${loginUser.name} `
  const line = props.line.replace(/^[\s\t]+/, '')
  const indent = props.line.match(/^[\s\t]+/)?.[0]?.length || 0
  let inner: React.ReactNode = line
  if (line.includes(mention)) {
    inner = <>
      {line.split(mention).map((t, i) => <React.Fragment key={i}>
        {i > 0 && <a>{mention}</a>}
        {t}
      </React.Fragment>)}
    </>
  }
  return <div style={{ textIndent: `${indent}em` }}>
    {inner}
  </div>
}

export default (props: { body: string }) => {
  const { body = '' } = props
  const lines = body.split(/[\r\n]/)

  return <>
    {lines.map((line, index) => {
      return <LineRender key={index} line={line}/>
    })}
  </>
}
